<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_book.toc' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <nav>
        <ion-list>
            <ion-item class="ion-text-wrap" *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)"
                [attr.aria-current]="selected === chapter.id ? 'page' : 'false'" button [class.item-dimmed]="chapter.hidden"
                [detail]="false">
                <ion-label>
                    <p [class.ion-padding-start]="addPadding && chapter.level === 1 ? true : null" class="item-heading">
                        @if (showNumbers) {
                            <span class="addon-mod-book-number">{{chapter.indexNumber}} </span>
                        } @else if (showBullets) {
                            <span class="addon-mod-book-bullet">&bull; </span>
                        }
                        <core-format-text [text]="chapter.title" contextLevel="module" [contextInstanceId]="moduleId"
                            [courseId]="courseId" />
                    </p>
                </ion-label>
            </ion-item>
        </ion-list>
    </nav>
</ion-content>
